import { Space, Notification } from "@douyinfe/semi-ui";
import swr from "../../../utils/swr";
import Page from "../../../utils/page";
import {
  Table,
  Text,
  Loading,
  Card,
  Grid,
  Input,
  Button,
} from "@nextui-org/react";
import { IconEdit, IconExternalOpen, IconDelete } from "@douyinfe/semi-icons";
import { useState } from "react";
import EditExam from "../../../utils/edit-exam";
import { useRouter } from "next/router";
import DeleteConfirmation from "../../../utils/delete-confirmation";
import { BASEURL } from "../../../utils/config";
import { mutate } from "swr";

export default function Home() {
  const router = useRouter();
  const { year, name } = router.query;

  const { data, isLoading, isError } = swr(`/exams/${year}/${name}`);
  if (
    isLoading ||
    typeof data === "undefined" ||
    typeof data.detail !== "undefined"
  ) {
    return (
      <Page page="/exams">
        <Loading />
      </Page>
    );
  } else if (isError) {
    return (
      <Page page="/exams">
        <Text>获取考试详情失败</Text>
      </Page>
    );
  }
  const columns = [];
  columns.push({
    label: "学生姓名",
    key: "name",
  });
  for (let subject in data.subjects) {
    columns.push({
      label: subject,
      key: subject,
    });
  }
  columns.push({
    label: "操作",
    key: "operates",
  });
  const table = {};
  let key = 1;
  for (let subject in data.subjects) {
    if (typeof data.subjects[subject] === "undefined") {
      continue;
    }
    for (let student_name in data.subjects[subject]) {
      if (typeof table[student_name] === "undefined") {
        table[student_name] = {
          key: key++,
        };
      }
      table[student_name][subject] = data.subjects[subject][student_name];
    }
  }
  const rows = [];
  for (let student_name in table) {
    rows.push({
      name: student_name,
      ...table[student_name],
      operates: (
        <Space>
          <IconEdit
            size="large"
            onClick={() => {
              Notification.info({
                content: "功能正在实现中，敬请期待",
              });
            }}
          />
          <IconDelete
            size="large"
            onClick={() => {
              Notification.info({
                content: "功能正在实现中，敬请期待",
              });
            }}
          />
        </Space>
      ),
    });
  }

  return (
    <Page page="/exams">
      <div
        style={{
          margin: "1rem",
        }}
      >
        <Card css={{ marginBottom: 15 }}>
          <Grid.Container gap={2} alignItems="baseline">
            <Grid xs={3}>
              <Text>考试时间：{data.time}</Text>
            </Grid>
            <Grid xs={3}>
              <Text>考试名称：{`${year} 届 ${name}`}</Text>
            </Grid>
            <Grid xs={3}>
              <Text>考试状态：{data.status}</Text>
            </Grid>
            <Grid xs={3}>
              <Button
                auto
                onClick={() => {
                  Notification.info({
                    content: "功能正在实现中，敬请期待",
                  });
                }}
              >
                添加学生
              </Button>
            </Grid>
          </Grid.Container>
        </Card>
        <Table
          aria-label="考试列表"
          css={{
            height: "auto",
            minWidth: "100%",
          }}
        >
          <Table.Header columns={columns}>
            {(column) => (
              <Table.Column key={column.key}>{column.label}</Table.Column>
            )}
          </Table.Header>
          <Table.Body items={rows}>
            {(item) => (
              <Table.Row key={item.key}>
                {(columnKey) => <Table.Cell>{item[columnKey]}</Table.Cell>}
              </Table.Row>
            )}
          </Table.Body>
        </Table>
      </div>
    </Page>
  );
}
